<template>
  <el-dialog width="500px" :title="title" :visible.sync="dialogFormVisible">
    <div class="formCenter">
      <el-form>
        <el-form-item label="组织名称：" :label-width="formLabelWidth">
          <el-input class="el_input" size="medium" v-model="depInfo.depName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="标段：" :label-width="formLabelWidth">
          <el-select
            v-model="depInfo.bidSection"
            size="medium"
            class="el_input"
            clearable
            placeholder="请选择"
            @change="getWorkAreaList(undefined)">
            <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属工区：" :label-width="formLabelWidth">
          <el-select v-model="workAreaId" size="medium" class="el_input" clearable multiple placeholder="请选择">
            <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人：" :label-width="formLabelWidth">
          <el-input class="el_input" size="medium" v-model="depInfo.linkman" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="formLabelWidth">
          <el-input class="el_input" size="medium" v-model="depInfo.phone" maxlength="11" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="confirmModifData">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HttpInterface from "../../../../util/httpInterface";
import { mapState, mapActions } from 'vuex';

export default {
  components: {},
  data() {
    return {
      title: "添加组织信息",
      dialogFormVisible: false,
      formLabelWidth: "85px",
      superior: [],
      workAreaInfo: [],
      depInfo: {
        depName: "",
        parentId: "0",
        linkman: "",
        phone: "",
        bidSection: "",
      },
      workAreaId: []
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(['selectByBidSection']),

    show(id) {
      this.dialogFormVisible = true;
      this.depInfo = {
        depName: "",
        parentId: "0",
        linkman: "",
        phone: "",
        bidSection: "",
      };
      this.workAreaId = [];
      if (id > 0) {
        this.title = "编辑组织信息";
        this.getDepInfo(id);
      } else {
        this.title = "添加组织信息";
      }
    },

    getWorkAreaList(depId) {
      let _this = this;
      if (!depId) this.workAreaId = [];

      this.selectByBidSection({
        bidSection: this.depInfo.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    verifyFormInfo() {
      let { depName, bidSection } = this.depInfo;
      if (!depName) {
        this.warningMessage("请输入组织名称！");
        return false;
      }
      if (!bidSection) {
        this.warningMessage("请输入标段！");
        return false;
      }
      if (this.workAreaId.length == 0) {
        this.warningMessage("请输入所属工区！");
        return false;
      }
      return true;
    },

    confirmModifData() {
      if (!this.verifyFormInfo()) return ;

      let _this = this;
      let arr = [];
      let { depInfo, workAreaInfo, workAreaId } = this;
      let params = depInfo;
      workAreaId.forEach(item => {
        workAreaInfo.forEach(key => {
          if (item == key.id)  arr.push({ id: key.id, name: key.name });
        })
      })
      depInfo.workAreaList = arr;
      let url = depInfo.depId == undefined ? HttpInterface.URL_DUTYMANAGE_ADDMANAGE : HttpInterface.URL_DUTYMANAGE_UPDATEMANAGE;
      HttpInterface.requestPost(this, url, params, function (response) {
        var data = response.data;
        if (data.success) {
          _this.successMessage("操作成功！");
          _this.dialogFormVisible = false;
          _this.$emit("refresh");
        } else {
          _this.errorMessage("操作失败！");
        }
      }, null, false);
    },

    // 组织详情
    getDepInfo(id) {
      var _this = this;
      var params = { id };
      HttpInterface.requestPost(this, HttpInterface.URL_DUTYMANAGE_EDITSHOW, params, function (response) {
        var { success, other } = response.data;
        if (success) {
          let arr = [];
          _this.depInfo = other;
          other.workAreaList.forEach(item => {
            arr.push(item.id);
          })
          _this.workAreaId = arr;
          _this.getWorkAreaList(other.depId);
        }
      }, null);
    }
  }
};
</script>

<style  scoped>
.el_input {
  width: 230px;
}

.formCenter {
  display: flex;
  justify-content: center;
}
</style>
